<template>
  <div>
    <breadcrumb></breadcrumb>
    <div class="titleBox">
      <!-- icon-dingdan -->
      <div class="iconfontcolor icon-dingdan"></div>
      <div class="infoBox">
        <div class="info_line1">
          <h3 class="tit">货主结算单{{ result.steelNumber }}</h3>
          <div class="tag" style="background-color: #fffce8; color: #f8b030" v-if="result.steelState == 0">
            待结算
          </div>
          <div class="tag" v-else>已结算</div>
        </div>
        <div class="info_line2">
          <div style="margin-right: 15px">
            创建时间：{{ result.createTime }}
          </div>
        </div>
      </div>

      <!-- <button
          class="examineBtn"
          v-if="result.steelState == 0"
          @click="isShowDialog()"
        >
          <span>结算</span>
        </button> -->

      <div class="feeGroup">
        <div class="feeBox">
          <div class="intervalLine"></div>
          <div class="feeItem">
            <div class="tit">承运金额</div>
            <div class="price">{{ result.orderAmount }}</div>
          </div>
        </div>
        <div class="feeBox">
          <div class="intervalLine"></div>
          <div class="feeItem">
            <div class="tit">结算金额</div>
            <div class="price" style="color: #1890ff">
              {{ result.payAmount || '--.--' }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="main">
      <div class="main_item">
        <titleVue :title="'基本信息'"></titleVue>
        <el-descriptions class="descriptionsInfo" :column="3" :labelStyle="{
          color: '#939393',
          fontSize: '12px',
          fontWeight: 'bold',
          marginRight: '20px',
        }" :contentStyle="{
  color: '#262626',
  fontSize: '12px',
}">
          <el-descriptions-item label="项目名称">{{
            result.projectName
          }}</el-descriptions-item>
          <el-descriptions-item label="业务类型">{{
            result.steelTypeStr
          }}</el-descriptions-item>
          <el-descriptions-item label="计价方式">{{
            result.priceModeStr
          }}</el-descriptions-item>
          <el-descriptions-item label="计量单位">{{
            result.priceUnit
          }}</el-descriptions-item>
          <el-descriptions-item label="承运单位">{{
            result.supplierName
          }}</el-descriptions-item>
          <el-descriptions-item label="运量">{{
            result.transportTotal
          }}</el-descriptions-item>
          <el-descriptions-item label="负责人">{{
            result.headName
          }}</el-descriptions-item>
          <el-descriptions-item label="联系电话">{{
            result.headTel
          }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="main_item" v-if="result.steelState == 1">
        <titleVue :title="'结算费用'"></titleVue>
        <el-descriptions border class="descriptionsInfo" :column="3" :labelStyle="{
          color: '#262626',
          width: '120px',
          fontSize: '12px',
          fontWeight: 'bold',
        }" :contentStyle="{
  color: '#262626',
  fontSize: '12px',
}">
          <el-descriptions-item label="承运金额">{{
            result.orderAmount
          }}</el-descriptions-item>
          <el-descriptions-item label="结算金额">{{
            result.payAmount
          }}</el-descriptions-item>
          <el-descriptions-item label=""></el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="main_item">
        <titleVue :title="'订单信息'"></titleVue>
        <div class="list">
          <el-table :data="result.orderInfoList" style="width: 100%" :header-cell-style="{
            height: '40px',
            backgroundColor: '#F5F5F5',
            color: '#262626',
            fontSize: '12px',
            padding: '0',
            fontweight: 'bold',
          }">
            <el-table-column align="center" prop="" label="序号">
            </el-table-column>
            <el-table-column align="center" prop="transportStatus" label="订单状态">
              <template slot-scope="scope">
                <div class="tag" style="color: #1acb7a; background-color: #ebfef5" v-if="scope.row.transportStatus == 9">
                  <div class="dian" style="color: #1acb7a"></div>
                  <div class="text">已完成</div>
                </div>
                <div class="tag" style="color: #f9aa0d; background-color: #fffce8"
                  v-else-if="scope.row.transportStatus == 1">
                  <div class="dian" style="color: #f9aa0d"></div>
                  <div class="text">待派车</div>
                </div>
                <div class="tag" v-else>
                  <div class="dian"></div>
                  <div class="text">已派车</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="orderNo" label="订单编号">
            </el-table-column>
            <el-table-column align="center" prop="name" label="货主">
            </el-table-column>
            <el-table-column align="center" prop="lineName" label="路线">
            </el-table-column>
            <el-table-column align="center" prop="transUnitPrice" label="承运方金额">
            </el-table-column>
            <el-table-column align="center" prop="otherAmount" label="其他费用">
            </el-table-column>
            <el-table-column align="center" prop="createTime" label="创建时间" sortable>
            </el-table-column>

            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <div>
                  <el-button type="text" size="small" @click="routeToDetail(scope.row.waybillId)">详情</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>

    <!--    <el-button type="text" size="small" @click="$router.push('/orderManagement/SettlementDoc/paymentOrderDetails/' + 4564)">测试详情</el-button>-->
    <el-dialog class="FleetDialog" title="车队结算" :visible.sync="dialogVisible" width="343px">
      <el-form :model="FleetForm" :rules="FleetRules" ref="FleetForm" label-width="100px" class="demoForm">
        <el-form-item label="应付金额" prop="payableAmount">
          <el-input v-model="FleetForm.payableAmount" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="实付金额" prop="payAmount">
          <el-input v-model="FleetForm.payAmount"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="notes">
          <el-input type="textarea" resize="none" :rows="2" placeholder="请输入内容" v-model="FleetForm.notes">
          </el-input>
        </el-form-item>

        <el-form-item>
          <div class="BtnBox">
            <el-button class="Btn" @click="dialogVisible = false">取消</el-button>
            <el-button class="Btn" type="primary" @click="submitForm('FleetForm')">确定</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
  
<script>
import breadcrumb from "@/components/breadcrumb.vue";
import titleVue from "@/components/titleVue";
import httpApi from "@/http";

export default {
  data() {
    let validatePayRule = (rule, value, callback) => {
      let regular = /^([1-9]\d*(\.\d*[1-9][0-9])?)|^(0\.\d*[1-9][0-9])$|^(0\.\d*[1-9])$/

      if (value == '') {
        callback(new Error('金额不能为空'))
      } else if (value.split('.').length > 2) {
        callback('只能有一个小数点')
      } else if (!regular.test(value)) {
        callback(new Error('请输入正确面额金额'))
      } else {
        callback()
      }
    };
    return {
      result: {},
      activeName: "first",
      dialogVisible: false,
      oderState: 0, //假数据 核算状态
      records: [],
      FleetForm: {
        fleetSteelOrderId: "",
        notes: "",
        payableAmount: "",
        payAmount: "",
      },
      FleetRules: {
        payAmount: [{validator:validatePayRule,trigger: "blur"}],
        notes: { max: 30, message: "最大30个字符", trigger: "blur" },
      },
    };
  },
  methods: {
    routeToDetail(id) {
      // console.log("运单ID=",id)
      if (id === undefined) {
        // console.log("请求的运单ID不正确")
      }
      this.$router.push("/orderManagement/WaybillManagement/Details/" + id);
      // this.$router.push('/orderManagement/SettlementDoc/paymentOrderDetails/' + id)
    },
    async initDetails() {
      // console.log(11111,this.$route.params)
      let res = await httpApi.SettlementDocApi.getPaymentDetail({
        id: this.$route.params.id,
      });
      this.result = res.data.data;
      this.FleetForm.payableAmount = res.data.data.orderAmount;
      this.FleetForm.fleetSteelOrderId = res.data.data.fleetSteelOrderId;
      // console.log(this.result, "12312321")
    },

    isShowDialog() {
      this.dialogVisible = true;
    },
    submitForm(FleetForm) {
      this.$refs[FleetForm].validate((valid) => {
        if (valid) {
          let params = {
            payAmount: this.FleetForm.payAmount,
            fleetSteelOrderId: this.FleetForm.fleetSteelOrderId,
            remark: this.FleetForm.notes,
          };
          httpApi.SettlementDocApi.calculatePayment(params).then((res) => {
            if (res.data.code == 200) {
              this.$message("付款单结算成功");
              this.$router.go(0);
            } else {
              this.$message("付款单结算失败");
              return false;
            }
          });
        } else {
          // console.log('error submit!!');
          return false;
        }
      });
    },
  },
  mounted() {
    this.initDetails();
  },
  components: {
    breadcrumb,
    titleVue,
  },
};
</script>
  
<style lang="scss" scoped>
.titleBox {
  flex: 1;
  background-color: #fff;
  height: 119px;
  display: flex;
  align-items: center;
  padding: 0 35px;
  margin-bottom: 9px;

  .feeGroup {
    margin-left: auto;
    display: flex;

    .feeBox {
      display: flex;
      width: 180px;
      align-items: center;

      .intervalLine {
        width: 2px;
        height: 64px;
        background-color: #f0f0f0;
        margin-right: 20px;
      }

      .feeItem {
        display: flex;
        flex-direction: column;
        margin-right: 20px;

        .tit {
          color: #a3a3a3;
          font-size: 12px;
          margin-bottom: 14px;
        }

        .price {
          color: #262626;
          font-size: 18px;
          font-weight: Bold;
        }
      }
    }
  }

  .icon-dingdan {
    font-size: 43px;
    margin-right: 10px;
  }

  .infoBox {
    display: flex;
    flex-direction: column;
    justify-content: center;

    .info_line1 {
      margin-bottom: 3px;
      display: flex;
      align-items: center;

      >.tit {
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        margin-right: 8px;
        color: #262626;
      }

      >.tag {
        background-color: #ecf5fe;
        border-radius: 4px;
        width: 54px;
        height: 20px;
        color: #1890ff;
        font-size: 10px;
        text-align: center;
        line-height: 20px;
      }
    }

    .info_line2 {
      display: flex;
      color: #939393;
      font-size: 12px;
    }
  }

  .examineBtn {
    background-color: #1890ff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: #ffffff;
    font-size: 12px;
    width: 80px;
    height: 36px;
    cursor: pointer;
    margin-left: auto;

    &:hover {
      opacity: 0.8;
      transition: 0.2s;
    }
  }
}

.main {
  padding: 35px;
  min-height: calc(100vh - 255px);
  background-color: #fff;

  .main_item {
    margin-bottom: 40px;

    .list {
      border: 1px solid #f0f0f0;

      .routeBox {
        display: flex;
      }
    }
  }
}

.FleetDialog {
  ::v-deep .el-dialog__header {
    border-bottom: 1px solid #f0f0f0;
    color: #262626;
    font-size: 14px;
    font-weight: bold;
    padding: 0 20px 0px;
    height: 50px;
    line-height: 50px;
  }

  ::v-deep .el-form-item__label {
    color: #262626;
    font-size: 12px;
    line-height: 32px;
  }

  ::v-deep .el-input__inner {
    line-height: 32px;
    height: 32px;
  }

  ::v-deep .el-dialog__body {
    padding: 25px 52px 24px 29px;
  }

  .BtnBox {
    display: flex;
    justify-content: flex-end;

    .Btn {
      height: 36px;
      width: 80px;
      font-size: 12px;
    }
  }
}
</style>
  